<template>
	<div class="food">
		<h1>美食预约列表</h1>
		<div class="content" v-if="isShow">
			<el-row>
			<el-button type="primary" @click="addFood">新增预约</el-button>
		</el-row>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="名称" >
			<template slot-scope="scope">
				<span>{{ scope.row.name }}</span>
			</template>
		</el-table-column>
		<el-table-column label="图片">
			<template slot-scope="scope">
				<img :src="baseUrl+scope.row.img_url" width="100px">
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button size="mini" @click="ascend(scope.$index, scope.row)">上升</el-button>
				<el-button size="mini" @click="descend(scope.$index, scope.row)">下降</el-button>
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
		</div>
		<!--增加美食-->
		<div class="content" v-else="isShow">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

  <el-form-item label="图片" >
   <el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
:on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"
  :file-list="fileList"
  :limit="1"
  :auto-upload="false"
  >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
</el-upload>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button> 
  </el-form-item>
</el-form>
	</div>
	</div>
	
</template>

<script>
	import config1 from "@/assets/js/config1.js";
	import config from "@/assets/js/config.js";
export default {
		data() {
			return {
				
				tableData: [{
					name: '',
				   img_url: ''
				
					}

				],
			baseUrl:config1.baseUrl,
				 ruleForm: {
                 name: '',
                  region: ''
			},
			rules: {
          name: [
            { required: true,  message: '请填写名称', trigger: 'blur' },
            
          ] 
            
      },  fileList: [],
				isShow:true,
				page:0,
				formData: new FormData()
			}
			
		},
		methods: {
			descend(index, rows){
				//降序
				console.log(rows.orders)
				this.$require.post(config.sortFood,{
					move:-1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
			ascend(index, rows){
				//升序
				console.log(rows.orders)
				this.$require.post(config.sortFood,{
					move:1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
			
				changeUpload(file, fileList) {
					//上传
			console.log(this.$store.state.token)
			console.log(file, fileList);
			console.log(file.raw.name);
			var formData = new FormData();
			formData.append("files", file.raw);
			this.$require.post(config.uploadImg, formData, {
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res) => {
				console.log(res)
               this.img_url=res.data.data.img_url;
               console.log(this.img_url)
			})

		},
			 handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
     },
			handleEdit(index, rows) {
				 let id= rows[index]
			      console.log( rows.id)
			      console.log(rows)
	         this.$router.push({path: '/foodedit', 
	         query:{
	         	id:rows.id,
	         	list:rows
	         	
	         }})
			},
			//删除
			deleteRow(index, rows) {			  
		  this.$require.post(config.delFood,{
		        id:rows[index].id
		  },{
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res)=>{
		  
		  })
             rows.splice(index,1);
		},
			addFood(){
				this.isShow=!this.isShow
			},
		submitUpload() {
        this.$refs.upload.submit();
        	this.$notify({
					title: '',
					message: '上传成功',
					type: 'success'
				});
        },
        //立即提交渲染页面
      submitForm(formName) {
        	console.log(formName)
        this.$refs[formName].validate((valid) => {
        
          if (valid) {
          	this.isShow=!this.isShow;
          		this.$require.post(config.food,{
					name:this.ruleForm.name,
					img_url:this.img_url
				},{
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res)=>{
			
			})
          } else {
            return false;
          }
        });

      },
       resetForm(formName) {
        this.$refs[formName].resetFields();
      }
		},
		created(){
			this.$require.get(config1.reserFoodList,{
				parmas:{
			page:this.page
		}
			}).then((res) => {
				console.log(res)
				this.tableData = res.data.data.rows

			})
		}
	}
</script>

<style lang="scss" scoped="scoped">
	$htitle:32px; //标题文字大小
	.el-table .cell{
		white-space: nowrap;
	}
	.scenic {
		padding: 0 30px!important;
	}
	
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.el-table td,
	.el-table th {
		padding: 12px 0;
		 
	}
	
	.el-button--mini,
	.el-button--mini.is-round {
		padding: 12px 20px;
	}
	.el-table .cell{
		background-color: #000;
	}
	.food{
		padding:0 30px;
		}
	h1 {
		font-size: $htitle;
		margin:21px 0;
	}
</style>